<template>
  <div class="page-container">
    <h2>奖品管理</h2>
    <a-button type="primary" @click="showPrizeModal = true">
      创建奖品
    </a-button>
    <a-table
      :columns="prizeColumns"
      :data-source="prizeList"
      style="margin-top: 20px"
    >
      <template #bodyCell="{ column, record }">
        <a-space v-if="column.key === 'action'">
          <a-button @click="editPrize(record)">编辑</a-button>
          <a-button type="primary" danger @click="deletePrize(record.id)">
            删除
          </a-button>
        </a-space>
      </template>
    </a-table>

    <!-- 奖品模态框 -->
    <a-modal
      v-model:open="showPrizeModal"
      :title="prizeModalTitle"
      @ok="handlePrizeSubmit"
    >
      <a-form :model="prizeForm" layout="vertical">
        <a-form-item label="奖品名称">
          <a-input
            v-model:value="prizeForm.name"
            placeholder="请输入奖品名称"
          />
        </a-form-item>
        <a-form-item label="奖品数量">
          <a-input-number
            v-model:value="prizeForm.quantity"
            placeholder="请输入奖品数量"
            :min="1"
          />
        </a-form-item>
        <a-form-item label="抽奖轮次">
          <a-input-number
            v-model:value="prizeForm.round"
            placeholder="请输入抽奖轮次"
            :min="1"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { prizeApi } from "../../api";

// 模态框状态
const showPrizeModal = ref(false);
const prizeModalTitle = ref("创建奖品");

// 数据列表
const prizeList = ref([]);

// 分页状态
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
});

// 表单数据
const prizeForm = reactive({
  id: null,
  name: "",
  quantity: 1,
  round: 1,
});

const prizeColumns = [
  { title: "ID", dataIndex: "id", key: "id" },
  { title: "轮次", dataIndex: "round", key: "round" },
  { title: "奖品名称", dataIndex: "name", key: "name" },
  { title: "数量", dataIndex: "quantity", key: "quantity" },
  { title: "操作", key: "action" },
];

// 加载奖品列表
const fetchData = async () => {
  try {
    const res = await prizeApi.getList({
      page: pagination.current,
      pageSize: pagination.pageSize,
    });
    console.log(res);
    prizeList.value = res.data.list || [];
    pagination.total = res.data.total || 0;
  } catch (error) {
    console.error("加载奖品失败:", error);
  }
};

// 创建/编辑奖品
const editPrize = (record) => {
  if (record) {
    prizeModalTitle.value = "编辑奖品";
    Object.assign(prizeForm, record);
  } else {
    prizeModalTitle.value = "创建奖品";
    Object.keys(prizeForm).forEach((key) => {
      prizeForm[key] =
        key === "id" ? null : key === "count" ? 1 : key === "round" ? 1 : "";
    });
  }
  showPrizeModal.value = true;
};

watch(showPrizeModal, (newVal) => {
  if (!newVal) {
    // 表单数据
    prizeForm.id = null;
    prizeForm.name = "";
    prizeForm.quantity = 1;
    prizeForm.round = 1;
  }
});

// 提交奖品
const handlePrizeSubmit = async () => {
  try {
    if (prizeForm.id) {
      await prizeApi.update(prizeForm.id, prizeForm);
    } else {
      await prizeApi.create(prizeForm);
    }
    showPrizeModal.value = false;
    fetchData();
  } catch (error) {
    console.error("奖品操作失败:", error);
  }
};

// 删除奖品
const deletePrize = async (id) => {
  try {
    await prizeApi.delete(id);
    fetchData();
  } catch (error) {
    console.error("删除奖品失败:", error);
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.page-container {
  min-height: 600px;
}
</style>
